<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="./js/vue.js">

    </script>
    
</head>
<body>
    <div id="root">
        <h3>欢迎来到{{name}}学习</h3>
        <br>
        <!-- <button v-on:click="showInfo1">点我去学习</button> -->
        <!-- 点击事件  v-on:click=    简写：  @click= -->
        <button @click="showInfo1">点我去学习</button>
        <button @click="showInfo2(66,$event)">点我去学习</button>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false;
    
    new Vue({ 
      el:'#root', 
      data:{
      name:'尚硅谷'  
      },
      
      methods: {
        showInfo1(event){
        alert("同学你好1"),
        console.log(event.target.innerText)
        },
        showInfo2(number,event){
            alert("同学你好2"),
            console.log(number,event)
        }
      },
    })
    
</script>
</html>